<template>
  <el-dialog
    :title="`${type === 'Add' ? '新增' : '编辑'}账号`"
    :visible.sync="dialogVisible"
    width="600px"
    custom-class="dialog"
    @close="handleClose"
  >
    <el-form size="small" label-width="60px">
      <el-form-item label="姓名">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="密码" class="random-password">
        <el-input />
        <el-button size="small" type="primary" plain @click="genRandomPassword(10)">
          随机密码
        </el-button>
      </el-form-item>
      <el-form-item label="角色">
        <el-select class="full-width" placeholder="请选择">
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select class="full-width" placeholder="请选择" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" size="small">取 消</el-button>
      <el-button type="primary" size="small" @click="dialogVisible = false">
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      type: "Add",
      currentRow: null,
      dialogVisible: false,
      roleOptions: [
        { label: "操作员", value: "1" },
        { label: "仓管员", value: "0" },
      ],
      statusOptions: [
        { label: "启用", value: "1" },
        { label: "停用", value: "0" },
      ],
    };
  },
  methods: {
    openHandle(type, row) {
      this.type = type;
      this.currentRow = { ...row };
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    genRandomPassword(len = 10) {
      let randomString = "";
      const charSet =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*";
      for (let i = 0; i < len; i++) {
        let randomPoz = Math.floor(Math.random() * charSet.length);
        randomString += charSet.substring(randomPoz, randomPoz + 1);
      }
      console.log("randomString", randomString);
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog {
  .full-width {
    width: 100%;
  }
  .random-password {
    .el-input {
      width: calc(100% - 90px);
    }
    .el-button {
      margin-left: 10px;
    }
  }
}
</style>
